<template>
  <div class="integralMall-warp" v-if="data" @click="$router.push({ path: '/pages/integralProductInfo/integralProductInfo', query: { id: data.id } }) ">
    <div class="ant-product-hot">
      <div class="integralMall-hot-pic">
        <img :src="data.image_url" class="" mode="widthFix" />
      </div>
      <div class="integralMall-hot-info">
        <p class="integralMall-hot-name">{{data.goods_name}}</p>
        <p class="integralMall-hot-body">
          <span class="integralMall-hot-price">{{data.points_number}}积分</span>
          <span class="integralMall-hot-sales">销量{{data.sale_num}}</span>
        </p>
      </div>
    </div>
    <div class="integralMall-control">
      <i-button size="small" 
        i-class="integralMall-recharge" shape="circle">马上兑换</i-button>
      <!-- <div class="integralMall-remaining">剩余2件</div> -->
    </div>
  </div>
</template>

<script>
  import {
    getDate
  } from '@/utils/index'
  export default {
    props: ['data'],
    computed: {

    },
    mounted() {
    },
  };

</script>

<style lang="less">
  .ant-product-hot {

    .integralMall-hot-pic {
      background: #F9F9F9;
      border-radius: 10px;
      overflow: hidden;

      img {
        // width: 160px;
        // height: 170px;
        display: block;
        width: 100%;
        height: auto;
      }
    }

    .integralMall-hot-info {
      padding: 10px 0 10px;

      .integralMall-hot-name {
        font-size: 12px;
        color: #333333;
        line-height: 1.5em;
        margin-bottom: 10px;
      }

      .integralMall-hot-body {
        display: flex;
        align-items: flex-end;

        .integralMall-hot-price {
          font-size: 16px;
          font-weight: bold;
          color: #EE7559;
          line-height: 1em;
        }

        .integralMall-hot-sales {
          margin-left: 10px;
          font-size: 10px;
          color: #A0A0A0;
          line-height: 1em;
        }
      }
    }
  }

  .integralMall-warp {
    box-sizing: border-box;
    background: #fff;
    padding: 12px 10px 10px 15px;
    flex: 0 50%;
    border: 1rpx solid #F7F5F5;

    .integralMall-control {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .integralMall-remaining {
      font-size: 9px;
      color: rgba(160, 160, 160, 1);
    }

    .integralMall-recharge {
      height: 30px;
      line-height: 30px;
      background: none;
      background: #fff !important;
      box-shadow: #EE7559 !important;
      border: 1px solid #EE7559 !important;
      font-size: 14px;
      color: #EE7559 !important;
      margin: 0 !important;
    }

  }

</style>
